<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
</head>
<body>
<div id="container-01" class="mol-container"></div>
<style>
    .mol-container {
        width: 60%;
        height: 400px;
        position: relative;
    }
</style>

<script>
    $(function() {
        let element = $('#container-01');
        let config = { backgroundColor: 'orange' };
        /*let viewer = $3Dmol.createViewer( element, config );
        viewer.addSphere({ center: {x:0, y:0, z:0}, radius: 10.0, color: 'green' });
        viewer.zoomTo();
        viewer.render();
        viewer.zoom(0.8, 2000);*/
        let viewer = $3Dmol.createViewer( element, config );
        let pdbUri = './520070118f93a.mol';
        jQuery.ajax( pdbUri, {
            success: function(data) {
                let v = viewer;
                v.addModel( data, "mol2" );                       /* load data */
                v.setStyle({}, {cartoon: {color: 'spectrum'}});  /* style all atoms */
                v.zoomTo();                                      /* set camera */
                v.render();                                      /* render scene */
                v.zoom(1.2, 1000);                               /* slight zoom */
            },
            error: function(hdr, status, err) {
                console.error( "Failed to load PDB " + pdbUri + ": " + err );
            },
        });
    });
</script>
</body>
</html>